<template>
	<view class="login_box">
		<view class="login">
			<image class="userinfo-avatar" src="../../static/images/user-default.jpg"></image>
			<text class="userinfo-nickname">关爱工坊</text>
			<view class="login-box">
				<!-- <view class="login-notice">
					<view style="display: inline-block;margin: 0 8rpx 0 0;vertical-align: middle;">
						<tui-checkbox :checked="isChecked" @change="checkChange" color="#e09e40" borderColor="#999"
							scaleRatio="0.8"></tui-checkbox>
					</view>
					<label>我已阅读并同意</label>
					<label class='policy' @click='toLink(1)'>《隐私协议》</label>
					<label>和</label>
					<label class='policy' @click='toLink(2)'>《用户登录协议》</label>
				</view>
				<button class="login-btn" @click="goLogin">登录</button> -->
				<button class="login-btn" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">手机号快捷登录</button>
			</view>
		</view>
	</view>
</template>

<script>
	const util = require("@/utils/util.js")
	// const QQMapWX = require('@/libs/qqmap-wx-jssdk.min.js');
	// 调用接口
	// let qqMap = new QQMapWX({
	// 	key: util.qqMapKey
	// })

	export default {
		data() {
			return {
				loginCode: "", // 临时code
				openId: "", // 唯一登录凭证
			}
		},
		onLoad(options) {

		},
		onShow() {

		},
		methods: {
			// 是否阅读协议
			checkChange(e) {
				this.isChecked = e.checked;
			},
			// 获取openid
			goLogin() {
				uni.login({
					success: (res) => {
						this.loginCode = res.code
						util.request('wechat/wechatLogin', {
							jsCode: this.loginCode,
						}, 'post').then(res => {
							if (res.code == 1) {
								console.log(res.data.token,'+++',res.data.phone);
								uni.setStorageSync('token', res.data.token);
								uni.setStorageSync('phone', res.data.phone);
								util.toast('登录成功');
								setTimeout(() => {
									uni.navigateBack(1)
								}, 1500)
							}
						});
					}
				})
			},
			// 手机号一键登录
			getPhoneNumber(e) {
				var phoneCode = e.detail.code;
				if (phoneCode == null) {
					uni.showToast({
						title: '授权失败,请重新授权！',
						icon: 'none',
						duration: 3000
					});
					return;
				}
				util.request('wechat/wechatGetPhoneNumber', {
					jsCode: phoneCode,
				}, 'post').then(res => {
					if (res.code == 1) {
						uni.setStorageSync('token', res.data.token);
						uni.setStorageSync('phone', res.data.phone);
						util.toast('登录成功');
						setTimeout(() => {
							uni.navigateBack(1)
						}, 1500)
					}
				});
			},
			// 查看协议
			toLink(type) {
				let url = ''; // 协议
				if (type == 1) {
					// 隐私协议
					url = "https://oss-mao-test.oss-cn-chengdu.aliyuncs.com/wendang/mmcysxy.docx";
				} else {
					// 用户登录协议
					url = "https://oss-mao-test.oss-cn-chengdu.aliyuncs.com/wendang/mmcyhzcxy.docx"
				}
				url = url.replace("http:", "https:");
				uni.downloadFile({
					url: url,
					success(res) {
						const filePath = res.tempFilePath
						if (res.statusCode === 200) {
							uni.openDocument({
								filePath: filePath,
								success(res) {},
								fail(err) {
									showBusy(JSON.stringify(err));
								}
							})
						}
					},
					fail(err) {
						showBusy(JSON.stringify(err));
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		background: #F5F9FC;
	}
	.login_box {
		width: 100vw;
		height: 100vh;
		display: flex;
		align-items: center;
		justify-content: center;
		.login {
			text-align: center;
		}
	}
	.storePicker {
		line-height: 76rpx;
		font-size: 28rpx;
		color: #333;
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 540rpx;
	}

	.bottom-notice {
		font-size: 14px;
		width: 100%;
		font-size: 16px;
		align-items: center;
	}

	.bottom-notice-item {
		width: 100%;
		text-align: center;
		font-size: 30rpx;
	}

	.userinfo-avatar {
		width: 120rpx;
		height: 120rpx;
		margin: 0 auto;
		display: block;
		border-radius: 50%;
	}

	.userinfo-nickname {
		margin: 40rpx 0;
		font-size: 36rpx;
		font-weight: bold;
		margin: 20rpx auto 40rpx;
		display: block;
	}

	.login-item {
		background: #ffffff;
		font-size: 14px;
		border: 1rpx solid #e9e8e7;
		font-size: 28rpx;
		border-radius: 30px;
		width: 88%;
		margin-left: 6%;
		margin-right: 6%;
		height: 86rpx;
		display: flex;
		align-items: center;
		margin-bottom: 26rpx;

		.tui-input__wrap {
			padding: 0 !important;
			width: 100% !important;

			.tui-input__placeholder,
			.tui-input__self {
				font-size: 28rpx !important;
				color: #888;
			}
		}

		.tui-icon-gps {
			font-size: 44rpx !important;
		}

		.data-v-e795a7dc {
			width: 82%;
		}
	}

	.login-notice {
		font-size: 14px;
		font-size: 28rpx;
		width: 88%;
		margin-left: 8%;
		margin-right: 8%;
		align-items: center;
		margin-top: 30rpx;
		margin-bottom: 20rpx;
		font-size: 30rpx;
	}

	.icon {
		width: 40rpx;
		height: 40rpx;
		margin-left: 30rpx;
		margin-right: 20rpx;
		margin-top: 10rpx;
	}

	.input {
		width: 80%;

	}

	.text_code {
		color: #e09e40;
		margin-right: 20rpx;
		margin-left: 10rpx;
		width: 200rpx;
	}

	.text_code_rigist {
		color: #e09e40;
		margin-left: 30%;
		margin-right: 30%;
		width: 200rpx;
	}

	.btn {
		background-color: #e09e40;
		color: #FFF;
		font-size: 14px;
		margin-top: 30px;

	}

	.login-box {
		width: 100%;
	}

	.login-box>input {
		margin: 5% 0 8% 0;
		border-bottom: 1rpx solid lightgray;
	}

	.login-btn {
		width: 80vw;
		background-color: #EED1A7;
		color: #1A222D;
		margin-top: 10px;
		font-weight: normal;
		border-radius: 10px;
		font-size: 32rpx;
		margin-bottom: 20rpx;
	}

	.policy {
		color: #e09e40;
	}

	.login-init-notice {
		color: #e09e40;
		font-size: 32rpx;

	}

	.login-rigist {
		width: 100%;
		margin-top: 60rpx;
		text-align: center;
	}
</style>